<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>位置的变化</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#main{
			width: 200px;height:200px;border: 1px solid #666;
			background: orange;position: fixed;right: -200px;top: 200px;
		}
		#main span{
			width: 20px;background: red;position: absolute;left: -20px;
			top: 60px;
		}

	</style>
</head>
<body>
	<div id="main">
		<span>立即分享</span>
	</div>
<script type="text/javascript">
var oDiv = document.getElementById('main');
var timer = null;
// 鼠标移入，开始从右向左移动
oDiv.onmouseover = function () {
	clearInterval(timer);
	timer = setInterval(function () {
		oDiv.style.left = oDiv.offsetLeft-5+'px';
		if (oDiv.offsetLeft<=document.body.clientWidth-oDiv.clientWidth) {
			oDiv.style.left = document.body.clientWidth-oDiv.clientWidth+'px';
			console.log(oDiv.clientWidth);
			clearInterval(timer);
		}
	},50);
}
// 鼠标离开，从左向右移动
oDiv.onmouseout = function () {
	clearInterval(timer);
	timer = setInterval(function () {
		oDiv.style.left = oDiv.offsetLeft+5+'px';
		if (oDiv.offsetLeft>=document.body.clientWidth) {
			oDiv.style.left = document.body.clientWidth+'px';
			console.log(document.body.clientWidth);
			clearInterval(timer);
		}
	},50);
}
</script>
</body>
</html>